<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#aa{
				padding: 50px;
				/*背景图片，不重复*/
				background: url("img/ico/ico1.png") no-repeat,url("img/1-1.jpg") no-repeat;
				/*背景图大小*/
				background-size:10% 40%,100% 100%;
				/*背景定位*/
				background-position: right;
				/*内容背景,边框的背景*/
				background-origin: content-box,border-box ;
				/*阴影*/
				box-shadow: 10px 30px 30px #0000C0;
				/*边框圆角*/
				border-radius: 50px/15px;
				/*虚线边框*/
				border: 10px dotted #000000;
				/*规定背景的绘制区域*/
				background-clip: content-box;
			}
			#bb{
				height: 300px;
				margin:50px 0px ;
				/*背景颜色渐变(deg表示旋转多少度)*/
				background: -webkit-linear-gradient(-90deg, red, blue,green); /* Safari 5.1 - 6.0 */
			    background: -o-linear-gradient(-90deg, red, blue,green); /* Opera 11.1 - 12.0 */
			    background: -moz-linear-gradient(-90deg, red, blue,green); /* Firefox 3.6 - 15 */
			    background: linear-gradient(-90deg, red, blue,green); /* 标准的语法（必须放在最后） */
			    /*repeating重复的线性渐变*/
			    background: -webkit-repeating-linear-gradient(red, blue 10%, green 20%); /* Safari 5.1 - 6.0 */
			    background: -o-repeating-linear-gradient(red, blue 10%, green 20%); /* Opera 11.1 - 12.0 */
			    background: -moz-repeating-linear-gradient(red, blue 10%, green 20%); /* Firefox 3.6 - 15 */
			    background: repeating-linear-gradient(red, blue 10%, green 20%); /* 标准的语法（必须放在最后） */
			    /*rgba(133,56,0,0)函数的最后一个参数1表示不透明,0表示透明度*/
			    /*background: linear-gradient(90deg,rgba(133,56,0,0),rgba(133,56,0,1));*/
			}
			#cc{
				height: 300px;
				/*径向渐变*/
				background: -webkit-radial-gradient(red, yellow 10%, blue 20%); /* Safari 5.1 - 6.0 */
			    background: -o-radial-gradient(red, yellow 10%, blue 20%); /* Opera 11.1 - 12.0 */
			    background: -moz-radial-gradient(red, yellow 10%, blue 20%); /* Firefox 3.6 - 15 */
				background: radial-gradient(red, yellow 10%, blue 20%);
			    /*重复的径向渐变*/
			   	background: -webkit-repeating-radial-gradient(red, yellow 10%, blue 20%); /* Safari 5.1 - 6.0 */
			    background: -o-repeating-radial-gradient(red, yellow 10%, blue 20%); /* Opera 11.1 - 12.0 */
			    background: -moz-repeating-radial-gradient(red, yellow 10%, blue 20%); /* Firefox 3.6 - 15 */
				background: repeating-radial-gradient(red, yellow 10%, blue 20%);/* 标准的语法（必须放在最后） */
			}
			#ee{
				padding: 55px;
				margin: 100px ;
				/*文本陰影*/
				text-shadow: 5px  5px 5px #3AD900;
				/*邊框陰影*/
				box-shadow:10px 10px 100px #0000C0;
				
				/*（transform轉型）（rotate旋轉）10度*/
				/*transform: rotate(10deg);*/
				
				/*包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。*/
				/*transform: skew(30deg,20deg);*/
				
				/*transition過度屬性*/
				transition: width 2s, height 2s, transform 2s;
			}
			#ee:hover{
				transform: skewX(180deg);
			}
			#ff{
				border: 1px dotted #000000;
			}
				#ff img{
					position: relative;
					/*动画*/
					animation:Ifirst 15s linear 0s infinite alternate;
					/*transition過度屬性*/
				    transition: width 2s, height 2s, transform 2s;
				}
				/*动画動作*/
				@keyframes Ifirst{
					0%{transform: rotate(180deg); left: 0px; top: 0px;}
					25%{ left: 1000px; top: 0px;}
					50%{ left: 0px; top: 0px;}
					75%{ left: 0px; top: 0px;}
					100%{ left: 0px; top: 0px;}
				}
			#gg button{
				color: white;
				padding: 30px  100px;
				margin: 50px;
				background: green;
				border-radius: 5px;
				box-shadow: 0px 10px 7px grey;
			}
		    #gg button:active{
		    	background: #004400;
		    	box-shadow: 0px 3px 7px grey;
		    	transform:translateY(4px);
		    }
		</style>
	</head>
	<body>
		<div id="aa">
			<h1>Lorem Ipsum Dolor</h1>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
			<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		</div>
		<div id="bb">
			<h1>Lorem Ipsum Dolor</h1>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
			<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		</div>
		<div id="cc">
			
		</div>
		<div id="ee">
			<h1>Lorem Ipsum Dolor</h1>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
			<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		</div>
		<div id="ff">
			<img src="img/ico/ico1.png" width="200px" height="200px"/>
		</div>
		<div id="gg">
			<button type="button">點擊</button>
		</div>
	</body>
</html>
